<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  currentPage: number
  pageSize: number
  total: number
  pageSizes?: number[]
}

interface Emits {
  (e: 'update:currentPage', page: number): void
  (e: 'update:pageSize', size: number): void
  (e: 'page-change', page: number, size: number): void
}

const props = withDefaults(defineProps<Props>(), {
  pageSizes: () => [10, 20, 50, 100]
})

const emit = defineEmits<Emits>()

const currentPageModel = computed({
  get: () => props.currentPage,
  set: (value) => emit('update:currentPage', value)
})

const pageSizeModel = computed({
  get: () => props.pageSize,
  set: (value) => emit('update:pageSize', value)
})

const handleSizeChange = (size: number) => {
  emit('update:pageSize', size)
  emit('page-change', 1, size)
}

const handleCurrentChange = (page: number) => {
  emit('update:currentPage', page)
  emit('page-change', page, props.pageSize)
}
</script>

<template>
  <div class="pagination-container">
    <el-pagination v-model:current-page="currentPageModel" v-model:page-size="pageSizeModel"
      :page-sizes="props.pageSizes" :total="props.total" layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<style scoped>
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
  padding: 16px 0;
}

:deep(.el-pagination) {
  --el-pagination-bg-color: transparent;
}

:deep(.el-pagination .btn-prev),
:deep(.el-pagination .btn-next),
:deep(.el-pagination .number) {
  border-radius: 6px;
}

:deep(.el-pagination .number.active) {
  background-color: #409eff;
  border-color: #409eff;
  color: white;
}

:deep(.el-pagination .number:hover) {
  color: #409eff;
}

:deep(.el-pagination .number.active:hover) {
  color: white;
}

/* 确保中文文本完全显示 */
:deep(.el-pagination .el-pagination__sizes),
:deep(.el-pagination .el-pagination__jump) {
  min-width: auto;
}

:deep(.el-pagination .el-pagination__total) {
  margin-right: 8px;
}
</style>
